<template>
  <!-- 动态v-bindstyle属性的时候必须传递一个对象 -->
  <img class="avatar-container" :src="url" :style="{ width: size + 'px', height: size + 'px' }" />
</template>

<script>
export default {
  //对象式构造属性
  props: {
    url: {
      type: String, //属性必须是字符串
      required: true, //属性必须传递
    },
    size: {
      type: Number,
      default:150,//可以通过default设置默认值
    },
  },
};
</script>

<style>
.avatar-container{
    border-radius: 50%;
    display: block;
    object-fit: cover;
}
</style>